<template>
    <div class='my_header'>
       <span>
         <slot name="left"></slot>
       </span>
       <section>
           <slot name="center"></slot>
       </section>
       <span>
           <slot name="right"></slot>
       </span>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    }
};
</script>

<style lang='scss'>
   .my_header{
     display: flex;
     height: 50px;
     span{
        width: 80px;
        text-align: center;
     }
     section{
       flex: 1;
       text-align: center;
     }
   }
</style>
